//import { createApp } from '../vue/vue.js'


function addr_Joining(...array) {
  let url = "/"
  for (let i=0;i<array.length;i++) {
	url += array[i]
  }
  return url
}

function getQueryVariable(variable){
  let query = window.location.search.substring(1);
  let vars = query.split("&");
  for (let i=0;i<vars.length;i++) {
    let pair = vars[i].split("=");
    if(pair[0] == variable){return pair[1];}
  }
  return(false);
}

const app = {
  data(){
    return {
	    progrees_class: "d-none progress",
	    fileid: "d-none p-2 flex-grow-1",
      progrees: "width:0%",
      label: false,
      value: "",
      myfilename:"",
      updatecode: "上传完成",
      buttonvalue: "上传"
	  }
  },
  created(){
	  let ret = getQueryVariable("id")
	  if (ret == false) {
	    this.on_setlabel(true)
	    window.onload = function(){ //加载页面完成事件
		    let parent = document.getElementById("mySwitch")
		    parent.checked = false
	    }
	  }else{
	    this.on_setlabel(this.label)
	    this.value = ret
	  }
  },
  methods:{
	  on_updatefile() {
	    console.log(this.label)
	    let file_btn = this.$refs.fileRef.files[0]
	    let mfiles = new FormData()
	    mfiles.append("file", file_btn)
	    let urlt
	    let typemode
	    if (this.label) {
		    urlt = "update"
		    mfiles.append("id", this.value)
		    typemode = "更新"
	    }else{
		    urlt = "append"
		    typemode = "上传"
	    }	
	    const btn = document.createElement("button")
	    btn.dataset.bsToggle = "modal"
	    btn.dataset.bsTarget = "#staticBackdrop"
	    btn.type = "button"
	    btn.class = "btn btn-none"
	    let mcall = function(){
		    let filebutton = document.getElementById("dropZone")
		    filebutton.appendChild(btn)
		    btn.click()
		    filebutton.removeChild(btn)
	    }	
      this.progrees_class = "progress"
	    axios.post(addr_Joining("api/",urlt), mfiles, {
		    headers: {
		      'Content-Type': 'multipart/form-data'
		    },
	      transformRequest: [function (data) {
	        return data
	      }],
		    onUploadProgress: progressEvent => {
		      let complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
		      this.progrees = "width:" + complete
	      }
	    }).then((response) => {
		    if (response.status === 200) {
	        this.progrees = "width:100%"
		      console.log(response.data)
		      if (response.data["msg"] == "succeed") {
			      this.updatecode = typemode + "完成"
		      }else{
			      this.updatecode = typemode + "失败"
		      }
		    }else{
		      this.updatecode = typemode + "失败，服务器没有响应"
	      }
		    mcall()
	    }).catch(error=>{
	      console.log(error)
	      this.updatecode = typemode + "失败，服务器错误"
	      mcall()
	    })
	  },
	  on_setlabel(val) {
	    if (val == false) {
		    this.label = true
		    this.fileid = "p-2 flex-grow-1"
		    this.buttonvalue = "更新"
	    }else{
		    this.label = false
		    this.fileid = "d-none p-2 flex-grow-1"
		    this.buttonvalue = "上传"
	    }
	  },
	  on_dropEvent(e){
	    this.dropActive = false
	    e.stopPropagation()
	    e.preventDefault()
	    this.myfilename = e.dataTransfer.files[0]["name"]
	    this.$refs.fileRef.files = e.dataTransfer.files
	  },
	  on_uploadFile() {
      this.$refs.fileRef.dispatchEvent(new MouseEvent('click'))
	  },
	  on_fileChange() {
	    this.myfilename = this.$refs.fileRef.files[0]["name"]
	  },
	  on_break(){
	    window.location.href="/"
	    //history.go(-1)
	  },
	  on_close(){
	    this.progrees = "width:0%"
	    this.progrees_class = "d-none progress"
	  }
  },
  mounted() {
	  let dropArea = document.getElementById('dropZone')
	  dropArea.addEventListener('drop', this.on_dropEvent, false)
	  dropArea.addEventListener('dragleave', (e) => {
	    e.stopPropagation()
	    e.preventDefault()
	    this.dropActive = false
	  })
	  dropArea.addEventListener('dragenter', (e) => {
	    e.stopPropagation()
	    e.preventDefault()
	    this.dropActive = true
	  })
	  dropArea.addEventListener('dragover', (e) => {
	    e.stopPropagation()
	    e.preventDefault()
	    this.dropActive = true
	  })
  }
}

var Ctor = Vue.extend(app)
new Ctor().$mount('#app')